  <div class="card-deck">
    <div class="card">
      <a href="#"><img data-src="holder.js/300x200?auto=yes"  alt="sample product" /></a>
      <div class="card-block">
        <h4 class="card-title"><a href="#">Product Title</a></h4>
        <p class="card-text">This text describes the above product a little not too much but just enough or maybe a little more</p>
        <a class="btn btn-secondary btn-sm pull-sm-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
      </div>
    </div>
    <div class="card">
      <a href="#"><img data-src="holder.js/300x200?auto=yes"  alt="sample product" /></a>
      <div class="card-block">
        <h4 class="card-title"><a href="#">Product Title</a></h4>
        <p class="card-text">This text describes the above product a little not too much</p>
        <a class="btn btn-secondary btn-sm pull-sm-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
      </div>
    </div>
    <div class="card">
      <a href="#"><img data-src="holder.js/300x200?auto=yes"  alt="sample product" /></a>
      <div class="card-block">
        <h4 class="card-title"><a href="#">Product Title</a></h4>
        <p class="card-text">This text describes the above product a little not too much but just enough -- or maybe we'll go on even longer on this one just because it's fun and, well, this product just really deserves it!</p>
        <a class="btn btn-secondary btn-sm pull-sm-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
      </div>
    </div>
   
    <div class="card">
      <a href="#"><img data-src="holder.js/300x200?auto=yes"  alt="sample product" /></a>
      <div class="card-block">
        <h4 class="card-title"><a href="#">Product Title</a></h4>
        <p class="card-text">This text describes the above product a little not too much but just enough or maybe a little more</p>
        <a class="btn btn-secondary btn-sm pull-sm-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
      </div>
    </div>
    <div class="card">
      <a href="#"><img data-src="holder.js/300x200?auto=yes"  alt="sample product" /></a>
      <div class="card-block">
        <h4 class="card-title"><a href="#">Product Title</a></h4>
        <p class="card-text">This text describes the above product a little not too much</p>
        <a class="btn btn-secondary btn-sm pull-sm-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
      </div>
    </div>
    <div class="card">
      <a href="#"><img data-src="holder.js/300x200?auto=yes"  alt="sample product" /></a>
      <div class="card-block">
        <h4 class="card-title"><a href="#">Product Title</a></h4>
        <p class="card-text">This text describes the above product a little not too much but just enough -- or maybe we'll go on even longer on this one just because it's fun and, well, this product just really deserves it!</p>
        <a class="btn btn-secondary btn-sm pull-sm-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
      </div>
    </div>

    <div class="card">
      <a href="#"><img data-src="holder.js/300x200?auto=yes"  alt="sample product" /></a>
      <div class="card-block">
        <h4 class="card-title"><a href="#">Product Title</a></h4>
        <p class="card-text">This text describes the above product a little not too much but just enough or maybe a little more</p>
        <a class="btn btn-secondary btn-sm pull-sm-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
      </div>
    </div>
    <div class="card">
      <a href="#"><img data-src="holder.js/300x200?auto=yes"  alt="sample product" /></a>
      <div class="card-block">
        <h4 class="card-title"><a href="#">Product Title</a></h4>
        <p class="card-text">This text describes the above product a little not too much</p>
        <a class="btn btn-secondary btn-sm pull-sm-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
      </div>
    </div>
    <div class="card">
      <a href="#"><img data-src="holder.js/300x200?auto=yes"  alt="sample product" /></a>
      <div class="card-block">
        <h4 class="card-title"><a href="#">Product Title</a></h4>
        <p class="card-text">This text describes the above product a little not too much but just enough -- or maybe we'll go on even longer on this one just because it's fun and, well, this product just really deserves it!</p>
        <a class="btn btn-secondary btn-sm pull-sm-right" href="#">View this product <i class="fa fa-arrow-circle-right"></i></a>
      </div>
    </div>
    <div class="card hidden-xs-down hidden-lg-up">
      <!-- empty card --> 
    </div>    
  </div>

